---
id: bd7158d8c442eddfaeb5bd17
title: JavaScript 電卓を作成する
challengeType: 3
forumTopicId: 301371
dashedName: build-a-javascript-calculator
---

# --description--
**注:** **React 18 はこのプロジェクトのテストとの互換性がありません。 (詳細は[こちらの Issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922) を参照してください。)**

**目標:** こちらと似た機能を持つアプリを構築してください: <a href="https://javascript-calculator.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://javascript-calculator.freecodecamp.rocks</a>

以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。

このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨されている一連のテクノロジーを使用した状況で生じる不具合については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングを楽しみましょう！Happy coding!

**ユーザーストーリー 1:** `=` (等号) を含み、対応する `id="equals"` を持つ、クリック可能な要素が電卓にあります。

**ユーザーストーリー 2:** 0～9 の各数字を含み、次の対応する ID を持つ、10 個のクリック可能な要素が電卓にあります: `id="zero"`、`id="one"`、`id="two"`、`id="three"`、`id="four"`、`id="five"`、`id="six"`、`id="seven"`、`id="eight"`、`id="nine"`。

**ユーザーストーリー 3:** 4 つのクリック可能な要素が電卓にあり、各要素は、4 つの基本的な算術演算子のいずれかと、対応する ID (`id="add"`、`id="subtract"`、`id="multiply"`、`id="divide"`) を持ちます。

**ユーザーストーリー 4:** `.` (小数点) を含み、対応する `id="decimal"` を持つ、クリック可能な要素が電卓にあります。

**ユーザーストーリー 5:** `id="clear"` を持つクリック可能な要素が電卓にあります。

**ユーザーストーリー 6:** 値を表示するための要素が電卓にあり、対応する `id="display"` を持ちます。

**ユーザーストーリー 7:** いつでも `clear` ボタンを押すと入力値と出力値がクリアされ、電卓が初期化後の状態に戻り、ID `display` を持つ要素に 0 が表示されます。

**ユーザーストーリー 8:** 数字を入力すると、ID `display` を持つ要素に入力が表示されます。

**ユーザーストーリー 9:** 任意の長さの一連の数字について、任意の順序で加算・減算・乗算・除算ができ、`=` を押すと、ID `display` を持つ要素に正しい結果が表示されます。

**ユーザーストーリー 10:** 電卓に数字を入力する際、複数のゼロで始まる数字は入力できません。

**ユーザーストーリー 11:** 小数点要素をクリックすると、現在表示されている値の後ろに `.` が追加されます。1 つの数字に 2 つの `.` を付けることはできません。

**ユーザーストーリー 12:** 小数点を含む数字の計算 (`+`、`-`、`*`、`/`) ができます。

**ユーザーストーリー 13:** 演算子を同時に 2 つ以上入力した場合は、最後に入力した演算 (負の記号 (`-`) を除く) が実行されます。 たとえば、`5 + * 7 =` と入力した場合の結果は `35` (`5 * 7`) になります。`5 * - 5 =` と入力した場合の結果は `-25` (`5 * (-5)`) になります。

**ユーザーストーリー 14:** `=` の直後に演算子を押すと、前の計算結果に対する新しい計算が開始されます。

**ユーザーストーリー 15:** 四捨五入については、小数点以下の桁数の精度を持たせます (厳密な基準はありませんが、たとえば `2 / 7` のような計算を小数点以下 4 桁以上の適切な精度で処理することができるようにします)。

**電卓のロジックについての注意:** 電卓の入力ロジックには、主に<dfn>即時実行ロジック</dfn>と<dfn>数式ロジック</dfn>の 2 つの考え方があります。 この例では数式ロジックを利用して計算の優先順位を確認しており、即時実行はしていません。 どちらも有効ですが、選択するロジックによっては、特定の式についてサンプルプロジェクトと異なる結果になる場合があることに注意してください (下記の例を参照してください)。 あなたの計算結果を市販の他の計算機で検証できる限り、バグとは見なさないこととします。

**例:** `3 + 5 x 6 - 2 / 4 =`

-   **即時実行ロジック:** `11.5`
-   **数式ロジック:** `32.5`

<a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

完了したら、すべてのテストが成功する状態の作業プロジェクトの URL を送信してください。

# --solutions--

```js
// solution required
```
